<template>
	<div>
		<div class="chat-input" id="chat-input" v-if="!flag">
			<div class="choose-pic"><image @click="handlerUploadPic" src="../static/icon/photo_upload.png" alt="" :lazy-load="true" /></div>
			<div class="text-area-input">
				<textarea
					:maxlength="-1"
					:auto-height="true"
					:value="value"
					:placeholder="placeholder"
					@blur="handlerBlur"
					@input="handlerInput"
					@focus="handlerFocus"
					@linechange="handlerLineChange"
				></textarea>
			</div>
			<div class="common-language"><image @click="flag = true" src="../static/icon/chat_tips.png" alt="" :lazy-load="true" /></div>
			<div class="send-btn" @click="handlerSend(1)">发送</div>
		</div>
		<div class="c-l-warp-modal" v-if="flag" @click="flag = false">
			<div
				class="cl-warpX"
				:class="flag ? 'on' : ''"
				@click.stop="
					() => {
						return false;
					}
				"
			>
				<div class="title">常用语</div>
				<div class="cl-list-X"><div class="cl-item-X" @click="handlerClick(item.content)" v-for="(item, key) in commonLanguage" :key="key">{{ item.content }}</div></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			flag: false
		};
	},
	props: {
		placeholder: {
			type: String,
			default: () => {
				return '请输入内容...';
			}
		},
    value: {},
    commonLanguage: {
      type: Array,
      default: () => {
        return []
      }
    }
	},
	methods: {
		handlerBlur(e) {
			this.$emit('blur', e.detail.value);
		},
		handlerInput(e) {
			let str = e.detail.value;
			this.$emit('input', str);
		},
		handlerFocus() {
			this.$emit('focus', 1);
		},
		handlerSend(e) {
			this.$emit('send', e);
		},
		handlerUploadPic() {
			let that = this;
			that.$httpRequest.handlerUploadPic(res => {
				if (res) {
					this.$emit('upload', res.data.url);
				}
			});
		},
		handlerLineChange(e) {
			let max = uni.upx2px(135);
			let height = e.detail.height;
			height = height > max ? max : height;
			let min = uni.upx2px(98);
			let result = height + uni.upx2px(38);
			result = result < min ? min : result;
			this.$emit('linechange', result);
		},
		handlerClick(commonLanguage) {
      this.flag = false
			this.$emit('click', commonLanguage)
		}
	},
	mounted() {
		// this.textareaHeight = uni.upx2px(Math.ceil(this.$utils.getStrCharLen(this.value) / 30) * 42)
	}
};
</script>

<style scoped lang="scss">
.chat-input {
	width: 100%;
	border-top: 1px solid #ebebeb;
	min-height: 98upx;
	display: flex;
	justify-content: space-between;
	padding: 0 20upx;
	box-sizing: border-box;
	background: #fff;
	align-items: flex-end;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	.choose-pic {
		width: 48upx;
		height: 48upx;
		font-size: 0;
		padding: 25upx 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.text-area-input {
		width: 434upx;
		padding: 10upx 5upx 10upx;
		margin: 0 0 17upx;
		border-bottom: 1upx solid #ebebeb;
		textarea {
			width: 100%;
			// height: 42upx;
			min-height: 42upx;
			max-height: 135upx;
			padding: 0 5upx;
			resize: none;
			font-size: 30upx;
			line-height: 42upx;
			color: #000;
			border: none;
			margin: 0;
			outline: none;
		}
	}
	.common-language {
		font-size: 0;
		width: 48upx;
		height: 48upx;
		padding: 25upx 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.send-btn {
		width: 120upx;
		height: 48upx;
		margin: 25upx 0;
		border-radius: 4px;
		background: $uni-color-qian;
		font-size: 30upx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
}

@keyframes mymove {
	0% {
		bottom: -100%;
	}
	100% {
		bottom: 0;
	}
}

.c-l-warp-modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	.cl-warpX.on {
		bottom: 0;
		animation: mymove 0.5s 1;
	}
	.cl-warpX {
		width: 100%;
		background: #f6f6f6;
		padding: 0 20upx;
		box-sizing: border-box;
		position: fixed;
		bottom: -100%;
		left: 0;
		.title {
			width: 100%;
			font-size: 36upx;
			color: #999;
			line-height: 50upx;
			padding-top: 46upx;
			padding-bottom: 10upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.cl-list-X {
			width: 100%;
			.cl-item-X {
				width: 100%;
				height: 80upx;
				border-bottom: 1px solid #d6d6d6;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;
				line-height: 42upx;
				font-size: 30upx;
				&:last-child {
					border-bottom: none;
				}
				&:active {
					color: #fff;
					background: $uni-color-qian;
				}
			}
		}
	}
}
</style>
